<template>
    <div>
        <el-table
                :data="aaa"
                style="width: 100%">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="用户 ID">
                            <span>{{ props.row.id }}</span>
                        </el-form-item>
                        <el-form-item label="用户账号">
                            <el-popover trigger="hover" placement="top">
                                <span v-if="props.row.username==='admin'">这是管理员，拥有所有权限</span>
                                <span v-else>这是普通用户，拥有一般权限</span>

                                <div slot="reference" class="name-wrapper">
                                    <el-tag>
                                        <span>{{ props.row.username }}</span>
                                    </el-tag>
                                </div>
                            </el-popover>
                        </el-form-item>
                        <el-form-item label="邮箱">
                            <span>{{ props.row.email }}</span>
                        </el-form-item>
                        <el-form-item label="密码">
                            <span>{{ props.row.password }}</span>
                        </el-form-item>
                        <el-form-item label="加密盐">
                            <span>{{ props.row.salt }}</span>
                        </el-form-item>
                        <el-form-item label="头像路径">
                            <span>{{ props.row.avatar }}</span>
                        </el-form-item>
                        <el-form-item label="角色">
                            <span>{{ props.row.roles }}</span>
                        </el-form-item>
                        <el-form-item label="权限">
                            <span>{{ props.row.permission }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column
                    label="用户 ID"
                    prop="id">
            </el-table-column>
            <el-table-column
                    label="用户账号"
                    prop="username">
            </el-table-column>
            <el-table-column
                    label="邮箱"
                    prop="email">
            </el-table-column>
            <el-table-column
                    width="120"
                    align="center"
                    label="状态(锁定/正常)">
                <template slot-scope="scope">
                    <el-switch
                            v-model="scope.row.status"
                            :active-value="1"
                            :inactive-value="0"
                            @change="getSwitchValue(scope.row.username,scope.row.status)">
                    </el-switch>
                </template>
            </el-table-column>

            <el-table-column
                    label="操作">
                <template slot-scope="scope">

                    <el-button size="small" type="primary">修改</el-button>
                    <!--
                     <el-button slot="reference" size="small" type="danger" @click="del(scope.$index,scope.row.id)">删除</el-button>
                    -->

                    <el-button slot="reference" size="small" type="danger" @click="ab = true;del(scope.$index,scope.row.id)">删除</el-button>


                </template>

            </el-table-column>
        </el-table>

        <template id="dialog">
            <el-dialog
                    title="提示"
                    :visible.sync="ab"
                    width="30%"
                    :before-close="handleClose"
                    :append-to-body="true">
                <span>确定删除该用户吗？</span>
                <span slot="footer" class="dialog-footer">
                        <el-button @click="ab = false">取 消</el-button>
                        <el-button type="primary" @click="confirmDel">确 定</el-button>
                    </span>
            </el-dialog>
        </template>

    </div>
</template>

<style>
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
    .el-form--inline .el-form-item__content{
        vertical-align: baseline;
    }
    .el-switch__label{
        color: #909399;
    }
</style>

<script>

    module.exports = {

        props : ['aaa'],
        components: {
            //'my-dialog': httpVueLoader('/static/vue/dialog.vue'),
            'my-switch': httpVueLoader('/static/vue/switch.vue'),
        },
        data() {
            return {
                switchValue: true,
                visible: false,
                dialogVisible: false,
                delID : '',
                delIndex : '',
                ab: false

            }
        },
        methods : {
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            getSwitchValue(username, status){
                console.log(username + "-" + status)
            },
            del(index, id){//获得删除所需的信息
                this.delID = id;
                this.delIndex = index;
            },
            confirmDel(){
                console.log(this.delID, this.delIndex)
                this.ab = false
                this.aaa.splice(this.delIndex, 1)
            }
        },
        mounted(){
        },
    }
</script>